<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Alignment Cost</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script src="../dist/uPlot.iife.min.js"></script>
		<script>
			function randInt(min, max) {
				return Math.floor(Math.random() * (max - min + 1) + min);
			}

			function genTables(numTables, numSeries, numPoints, gapsAtMod) {
				let tables = [];

				for (let t = 0; t < numTables; t++) {
					let randXvals = new Set();

					while (randXvals.size < numPoints)
						randXvals.add(randInt(0, numPoints * 100));

					randXvals = Array.from(randXvals).sort((a, b) => a - b);

					let table = [
						randXvals
					];

					for (let s = 0; s < numSeries; s++) {
						table.push(randXvals.map(x => {
							let v = randInt(0, 100);
							return v % gapsAtMod == 0 ? null : v;
						}));
					}

					tables.push(table);
				}

				return tables;
			}

			function align(tables) {
				console.time("align");
				let nullModes = tables.map(t => t.map(s => 2));
			//	console.log(nullModes);
				let data = uPlot.join(tables, nullModes);
				console.timeEnd("align");
				return data;
			}

/*
			let tables = [
				[
					[3,5,6,7,20],
					[2,3,4,10,5],
				],
				[
					[1,2,3,4,5,17],
					[7,2,1,null,6,13],
				],
				[
					[9,14,15,16],
					[9,5,null,1],
				]
			];
*/
			let tableCfg = [5, 5, 1000, 5];
			console.log(tableCfg);

			console.time("genTables");
			let tables = genTables.apply(null, tableCfg);
			console.timeEnd("genTables");

//			console.log(tables);

			align(tables);
			align(tables);
			align(tables);
			align(tables);
			align(tables);
			align(tables);

			let data = align(tables);

		//	console.log(data3);

			const opts = {
				width: 2560,
				height: 600,
				scales: {
					x: {
						time: false,
					},
				},
				series: [
					{},
					{
					//	show: false,
						stroke: "red",
						fill: "rgba(255,0,0,0.1)",
						spanGaps: false,
					},
					{
					//	show: false,
						stroke: "green",
						fill: "rgba(0,255,0,0.1)",
						spanGaps: false,
					},
					{
					//	show: false,
						stroke: "blue",
						fill: "rgba(0,0,255,0.1)",
						spanGaps: false,
					},
				],
			};

			console.time("render");
			let u = new uPlot(opts, data, document.body);
			queueMicrotask(() => console.timeEnd("render"));

			setInterval(() => {
				u.series.forEach(s => {
					s.spanGaps = !s.spanGaps;
				});
				u.redraw();
			}, 1000);
		</script>

		<script>
			const xRange = 100;

			const tables3 = [
				[
					null,
					[10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20,10,20],
				],
				[
					null,
					[20,10,20,10],
				],
			];

			tables3.forEach(t => {
				t[0] = t[1].map((v, i) => i/t[1].length * xRange);
			});

			const data3 = uPlot.join(tables3);

			let opts3 = {
				width: 1920,
				height: 600,
				scales: {
					x: {
						time: false,
					},
					y: {
						range: [0, 20],
					}
				},
				series: [
					{},
					{
						stroke: "red"
					},
					{
						stroke: "blue",
						fill: "rgba(0,0,255,0.1)",
						paths: uPlot.paths.bars(),
					}
				]
			};

			let u3 = new uPlot(opts3, data3, document.body);
		</script>
	</body>
</html>